.bloodGlucose-value {
  background: #ffffff;
  overflow: hidden;
}
.ruler-value {
  color: #4abf78;
  font-size: 46rpx;
  text-align: center;
  position: relative;
  top: 100rpx;
}
.ruler {
  background: #ffffff;
  position: relative;
  width: 100%;
  margin: -50rpx auto 0;

  .cover-left {
    background: #ffffff;
    position: absolute;
    left: 0;
    bottom: -40rpx;
    height: 50rpx;
    width: 32%;
    z-index: 12;
    transform: translate(-50%, -50%);
    opacity: 1;
  }

  .cover-right {
    background: #ffffff;
    position: absolute;
    right: 0;
    bottom: -40rpx;
    z-index: 12;
    height: 50rpx;
    width: 32%;
    transform: translate(50%, -50%);
    opacity: 1;
  }

  .scroll-ruler {
    margin: 0 auto;
  }

  ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }

  &.ruler1 {
    .scroll-ruler {
      width: 74%;
    }

    .cover-left,
    .cover-right {
      opacity: 0;
    }

    .cover-unit {
      right: 0;
    }
  }

  .cover-view {
    width: 6rpx;
    height: 26rpx;
    background: #4abf78;
    position: absolute;
    left: 50%;
    bottom: -14rpx;
    z-index: 14;
    transform: translate(-50%, -50%);
  }
}

/* 画布 */
#canvas-ruler1,
#canvas-ruler2 {
  width: 2000rpx;
}

/* 游标 */
.canvas-cursor {
  width: 0;
  height: 0;
  border-left: 12rpx solid transparent;
  border-right: 12rpx solid transparent;
  border-bottom: 18rpx solid #4abf78;
  position: absolute;
  left: 50%;
  bottom: -40rpx;
  transform: translate(-50%, -50%);
  z-index: 222;
}

.cover-canvas {
  position: absolute;
  background: #000000;
  right: 0;
  bottom: 0;
  z-index: 22;
  height: 100rpx;
  width: 100%;
  opacity: 0.3;
}
